import React, { useState } from "react";
import classNames from "classnames";
import "./index.less";

export default ({ onClick, data }) => {
    console.log("data", data);

    let [select, setSelect] = useState(0);

    const onSelect = function (index) {
        setSelect(index);
    };

    return (
        <div className="button-group">
            {data.map((a, index) => {
                return (
                    <div
                        className={classNames("button-group-item center", {
                            selected: index == select,
                        })}
                        onClick={() => {
                            onSelect(index);
                            onClick && onClick(a, index);
                        }}>
                        {a.label}
                    </div>
                );
            })}
        </div>
    );
};
